<script lang="ts" setup>
import { ref } from 'vue';
import { useI18n } from '@/i18n';

import BannerLevel2 from '@/components/BannerLevel2.vue';
import AppContent from '@/components/AppContent.vue';

import banner from '@/assets/illustrations/banner-secondary.png';
import illustration from '@/assets/illustrations/advanced.png';
import order1 from '@/assets/category/advanced/1.png';
import order2 from '@/assets/category/advanced/2.png';
import order3 from '@/assets/category/advanced/3.png';
import order4 from '@/assets/category/advanced/4.png';
import order5 from '@/assets/category/advanced/5.png';
const i18n = useI18n();
const order = [order1, order2, order3, order4, order5];
const showIndex = ref(0);
function changeShowIndex(index: number) {
  showIndex.value = index;
}
</script>

<template>
  <BannerLevel2 :background-image="banner" :title="i18n.advanced.title" :illustration="illustration" />
  <AppContent :mobile-top="24">
    <div class="advanced">
      <h2>{{ i18n.advanced.subhead }}</h2>
      <div class="step-content-pc">
        <div class="step-nav">
          <div
            v-for="(item, index) in i18n.advanced.modules"
            :key="item.name"
            class="step-item"
            :class="showIndex === index ? 'step-item-active' : ''"
            @click="changeShowIndex(index)"
          >
            <img :src="order[index]" alt="" />
            <p>{{ item.name }}</p>
          </div>
        </div>
        <div class="step-body">
          <div v-for="(item, index) in i18n.advanced.modules" :key="index" class="body-item">
            <div v-if="showIndex === index">
              <div v-for="itemType in item.itemList" :key="itemType.name" class="item-list">
                <h4>{{ itemType.name }}</h4>
                <p>{{ itemType.desc }}</p>
                <div class="material lable-name1">
                  <div v-if="itemType.docsList" class="material-item">
                    <h5>{{ i18n.advanced.type_docs_label }}</h5>
                    <div class="link-box lable-name1">
                      <a v-for="itemLink in itemType.docsList" :key="itemLink.link" :href="itemLink.link" target="_blank" rel="noopener noreferrer">{{
                        itemLink.name
                      }}</a>
                    </div>
                  </div>
                  <div v-if="itemType.videoList" class="material-item">
                    <h5>{{ i18n.advanced.type_video_label }}</h5>
                    <div class="link-box lable-name2">
                      <a v-for="itemLink in itemType.videoList" :key="itemLink.link" :href="itemLink.link" target="_blank" rel="noopener noreferrer">{{
                        itemLink.name
                      }}</a>
                    </div>
                  </div>
                  <div v-if="itemType.optionList" class="material-item">
                    <h5>{{ i18n.advanced.type_practice_label }}</h5>
                    <div class="link-box lable-name3">
                      <a v-for="itemLink in itemType.optionList" :key="itemLink.link" :href="itemLink.link" target="_blank" rel="noopener noreferrer">{{
                        itemLink.name
                      }}</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="step-content-mobile">
        <div v-for="(item, index) in i18n.advanced.modules" :key="item.name" class="step-item">
          <div class="item-head">
            <img :src="order[index]" alt="" />
            <p>{{ item.name }}</p>
          </div>
          <div class="item-body">
            <el-collapse>
              <el-collapse-item v-for="(itemType, itemIndex) in item.itemList" :key="itemType.desc" :title="itemType.name" :name="itemIndex">
                <p class="detail">{{ itemType.desc }}</p>
                <div class="material">
                  <div v-if="itemType.docsList" class="material-item">
                    <h5>{{ i18n.advanced.type_docs_label }}</h5>
                    <div class="link-box">
                      <a v-for="itemLink in itemType.docsList" :key="itemLink.link" :href="itemLink.link" target="_blank" rel="noopener noreferrer">{{
                        itemLink.name
                      }}</a>
                    </div>
                  </div>
                  <div v-if="itemType.videoList" class="material-item">
                    <h5>{{ i18n.advanced.type_video_label }}</h5>
                    <div class="link-box">
                      <a v-for="itemLink in itemType.videoList" :key="itemLink.link" :href="itemLink.link" target="_blank" rel="noopener noreferrer">{{
                        itemLink.name
                      }}</a>
                    </div>
                  </div>
                  <div v-if="itemType.optionList" class="material-item">
                    <h5>{{ i18n.advanced.type_practice_label }}</h5>
                    <div class="link-box">
                      <a v-for="itemLink in itemType.optionList" :key="itemLink.link" :href="itemLink.link" target="_blank" rel="noopener noreferrer">{{
                        itemLink.name
                      }}</a>
                    </div>
                  </div>
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>
        </div>
      </div>
    </div>
  </AppContent>
</template>

<style lang="scss" scoped>
.advanced {
  --color-text: 0, 0, 0;

  h2 {
    font-size: var(--e-font-size-h3);
    line-height: var(--e-line-height-h3);
    font-weight: 300;
    color: var(--e-color-text1);
    margin: 0 auto;
    width: 184px;
    padding: 0 20px;
    text-align: center;
    background-image: url(@/assets/category/advanced/circle.png), url(@/assets/category/advanced/ellipse.png), url(@/assets/category/advanced/semicircle.png);
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position:
      0 10px,
      70% 100%,
      100% 0;
    @media screen and (max-width: 768px) {
      width: 92px;
      padding: 0 10px;
      font-size: var(--e-font-size-h7);
      line-height: var(--e-line-height-h7);
      background-position:
        0 4px,
        70% 100%,
        100% 0;
      background-size:
        19px 19px,
        10px 5px,
        31px 15px;
    }
  }
  .step-content-pc {
    margin-top: 60px;
    @media screen and (max-width: 768px) {
      display: none;
    }
    .step-nav {
      padding-bottom: 24px;
      display: flex;
      background-color: var(--e-color-brand1);
      justify-content: space-between;
      .step-item {
        padding: 20px 0 16px 0;
        text-align: center;
        cursor: pointer;
        width: 284px;
        &-active {
          background-image: url(@/assets/category/advanced/active.png);
          background-repeat: no-repeat;
          background-size: 100% 100%;
          margin-top: -20px;
        }
        img {
          width: 90px;
        }
        p {
          font-size: var(--e-font-size-h4);
          line-height: var(--e-line-height-h5);
          margin-top: var(--e-spacing-h6);
          color: var(--e-color-white);
        }
      }
    }
    .step-body {
      padding: var(--e-spacing-h2);
      border: 5px solid var(--e-color-brand3);
      border-top: none;
      .body-item {
        .item-list {
          & ~ .item-list {
            margin-top: var(--e-spacing-h4);
          }
          h4 {
            font-size: var(--e-font-size-h7);
            line-height: var(--e-line-height-h7);
            color: var(--e-color-text1);
            font-weight: 500;
          }
          p {
            margin-top: var(--e-spacing-h6);
            font-size: var(--e-font-size-text);
            line-height: var(--e-line-height-text);
            color: var(--e-color-text1);
          }
          .material {
            margin-top: var(--e-spacing-h6);
            padding: var(--e-spacing-h4) var(--e-spacing-h2);
            background-color: var(--e-color-bg4);
            .material-item {
              & ~ .material-item {
                margin-top: var(--e-spacing-h4);
              }
              h5 {
                font-size: var(--e-font-size-h7);
                line-height: var(--e-line-height-h7);
                color: var(--e-color-text1);
                font-weight: 500;
              }
              .link-box {
                margin-top: var(--e-spacing-h6);
                a {
                  margin-right: var(--e-spacing-h4);
                  font-size: var(--e-font-size-text);
                  line-height: var(--e-line-height-text);
                }
              }
            }
          }
        }
      }
    }
  }
  .step-content-mobile {
    display: none;
    @media screen and (max-width: 768px) {
      display: block;
      margin-top: var(--e-spacing-h4);
    }
    .step-item {
      border: 6px solid var(--e-color-brand1);
      & ~ .step-item {
        margin-top: var(--e-spacing-h4);
      }
      .item-head {
        height: 48px;
        background-color: var(--e-color-brand1);
        position: relative;
        padding-left: 60px;
        img {
          width: 60px;
          position: absolute;
          left: -6px;
          top: 2px;
        }
        p {
          font-size: var(--e-font-size-h8);
          line-height: 48px;
          color: var(--e-color-white);
        }
      }
      .item-body {
        :deep(.el-collapse) {
          border: none;
          padding: 0 10px 4px 10px;
        }
        :deep(.el-collapse-item__header) {
          border-bottom: none;
          background-color: var(--e-color-bg1);
          justify-content: space-between;
          font-size: var(--e-font-size-text);
          color: var(--e-color-text1);
          font-weight: 500;
        }
        :deep(.el-collapse-item__arrow) {
          transform: rotate(90deg);
        }
        :deep(.el-collapse-item__arrow.is-active) {
          transform: rotate(-90deg);
        }
        :deep(.el-collapse-item__wrap) {
          border-bottom: none;
          background-color: transparent;
        }
        :deep(.el-collapse-item__content) {
          padding-bottom: var(--e-spacing-h5);
        }
        .detail {
          font-size: var(--e-font-size-tip);
          line-height: var(--e-line-height-text);
          color: rgba(var(--color-text), 0.6);
        }
        .material {
          margin-top: var(--e-spacing-h8);
          padding: var(--e-spacing-h8) var(--e-spacing-h6);
          background-color: var(--e-color-bg4);
          .material-item {
            & ~ .material-item {
              margin-top: var(--e-spacing-h8);
            }
            h5 {
              font-size: var(--e-font-size-tip);
              line-height: var(--e-line-height-tip);
              color: var(--e-color-text-secondary);
            }
            .link-box {
              font-size: var(--e-font-size-tip);
              line-height: var(--e-line-height-tip);
              margin-top: var(--e-spacing-h8);
              a {
                display: block;
                & ~ a {
                  margin-top: var(--e-spacing-h8);
                }
              }
            }
          }
        }
      }
    }
  }
}
@include in-dark {
  h2 {
    background-image: url(@/assets/category/advanced/circle-dark.png), url(@/assets/category/advanced/ellipse-dark.png),
      url(@/assets/category/advanced/semicircle-dark.png);
  }
  .advanced {
    --color-text: 255, 255, 255;
  }
  .advanced .step-content-pc .step-nav .step-item-active {
    background-image: url(/.vitepress/src/assets/category/advanced/active-dark.png);
  }
}
</style>
